<template>
    <FrameWork>
    </FrameWork>
    <ContentField>
        <form @submit.prevent="addAccount">
        <div class="form-group" ><label>&nbsp;&nbsp;用户名:</label>
          <input v-model="username" class="form-control"  type="text" name="username">
        </div>
        <div class="form-group" ><label>&nbsp;&nbsp;手机号:</label>
          <input v-model="phone" class="form-control"  type="phone" name="phone">
        </div>
        <div class="form-group"><label >&nbsp;&nbsp;邮箱:</label>
          <input v-model="email" class="form-control"  type="email" name="email">
        </div>
        <div class="form-group"><label >&nbsp;&nbsp;密码:</label>
          <input v-model="password" class="form-control"  type="password" name="password">
        </div>
        <div class="form-group"><label >&nbsp;&nbsp;确认密码:</label>
          <input v-model="confirmedPassword" class="form-control"  type="password" name="confirmedPassword">
        </div>
        <div class="form-group"><label >&nbsp;&nbsp;</label>
            <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="role" v-model="roleId" value="2">
            <label class="form-check-label" for="inlineRadio1">学生</label>
            </div>
            <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="role" v-model="roleId" value="1">
            <label class="form-check-label" for="inlineRadio2">教师</label>
            </div>
        </div>
        <div class="form-group" style="text-align:center;">
          <div class="error-message">{{ error_message }}</div>
          <button class="btn btn-primary" type="submit" style="width:20%;margin-top:10px;">添加用户</button>
        </div>
      </form>
    </ContentField>
  </template>
  
  
  <script>
  
  import FrameWork from '@/components/admin/FrameWork.vue';
  import ContentField from '@/components/commons/ContentField.vue';
  import {ref} from 'vue';
  import router from '@/router/index';
  import $ from 'jquery';

  export default{
    name: 'AddAccountView',
    components:{
        FrameWork,
        ContentField,
    },
  
    setup(){
        let username = ref('');
        let phone = ref('');
        let email = ref('');
        let password = ref('');
        let confirmedPassword = ref('');
        let roleId = ref('');
        let error_message = ref('');   

        const addAccount = () => {


            $.ajax({   //注册新账号
                url: "http://localhost:8090/sls/account/register",
                type: "post",
                data: { 
                      username: username.value,
                      phone: phone.value,
                      email: email.value,
                      password: password.value,
                      confirmedPassword: confirmedPassword.value, 
                      roleId : roleId.value,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    router.push({name: 'accountManage'});  //添加成功,跳转到用户管理页面
                  }else{
                    error_message.value = resp.error_message;
                  }
                }
           });

        }
         
    return {
        username,
        phone,
        email,
        password,
        confirmedPassword,
        roleId ,
        error_message,
        addAccount,
        }
    }
    
  }
  
  </script>
  
  
  
  <style scoped>

  .form-group{
    margin: 5px auto;
  }
  .error-message{
          color:red;
  }
  
  </style>